<!-- 护理项目列表页 -->
<template>
    <div class="baseList">
      <div class="newBox">
        <button class="bt wt-120" @click="handleBulid()">新增护理项目</button>
      </div>
      <div class="tableBoxs">
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table
        :row-key="index"
        :data="data"
        :columns="COLUMNS"
        :bordered="bordered"
        :hover="hover"
        :size="size"
        cell-empty-content="-"
        resizable
        lazy-load
        >

          <!-- 图片预览及展示 -->
    <template #image="{ row }">
        <div class="tdesign-demo-image-viewer__base">
            <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image">
                        <img
                             alt="test"
                             :src="row.image"
                             class="tdesign-demo-image-viewer__ui-image--img"
                             />
                        <div
                             class="tdesign-demo-image-viewer__ui-image--hover"
                             @click="open"
                             >
                            <span><BrowseIcon size="1.4em" /> 预览</span>
                        </div>
                    </div>
                </template>
            </t-image-viewer>
        </div>
    </template>

        <!-- 价格拼接 -->
        <template #price="{ row }">
            {{ row.price.toFixed(2) }}
        </template>

        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl">删除</a>
            <a class="font-bt" @click="handleEdit(row.id)">编辑</a>
            <a class="delete">禁用</a>
          </div>
        </template>
        <!-- 序号处理 -->
         <template #rowIndex="{ rowIndex }">
          {{ 
            (pagination.pageNum - 1) * pagination.pageSize + (rowIndex + 1)  
          }}
         </template>
      </t-table>

      <!-- 分页 -->
       <t-pagination
       v-if="total > 4"
       v-model="pagination.pageNum"
       v-model:pageSize="pagination.pageSize"
       :total="total"
       @change="onPageChange"
        />
      </div>
    </div>
</template>

<script setup lang="jsx">
import{COLUMNS } from '../constants'

//接收属性
const props = defineProps({
  data: {
    type: Object,
    default: []
  },
  bordered: Boolean,
  hover: Boolean,
  size:Number,
  total:Number,
  pagination: {
    type: Object,
    default: {}
  }
})
//接收时间
const emits = defineEmits(['onPageChange','handleBulid','handleEdit'])
//当前子组件onPageChange事件函数
const onPageChange = (pageInfo) => {
  //调用父组件
  emits('onPageChange',pageInfo)
}
//执行新增事件
const handleBulid = () => {
  emits('handleBulid')
}
//编辑点击事件
const handleEdit = (id) => {
  emits('handleEdit',id)
}
</script>
